
<template>
  <div class="main-div">
    <Row >
      <Col span="24">
        <Card  dis-hover class="task-card">
          <div class="app-container">
            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  class="n-table--border"
                  stripe
                  highlight-current-row
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                >
                  <el-table-column
                    label="序号"
                    fixed
                    type="index"
                    width="50"
                    fixed
                    align="center">
                    <template slot-scope="scope">
                      <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="标题"
                    show-overflow-tooltip
                    >
                  </el-table-column>
                  <el-table-column
                    prop="subject"
                    label="模板名称"
                    show-overflow-tooltip
                    >
                  </el-table-column>
                  <el-table-column
                    prop="plain"
                    label="纯文本模板"
                    show-overflow-tooltip
                    >
                  </el-table-column>
                  <el-table-column
                    prop="isDefault"
                    label="是否默认"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <el-tag  v-if="scope.row.isDefault" type="primary">是</el-tag>
                      <el-tag  v-else type="info">否</el-tag >
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button   size='mini' type='text' icon="el-icon-edit"   @click="openMsgDialog(scope.row.id)">编辑</el-button>
                      <el-popconfirm
                        title="您确定要删除吗？"
                        confirmButtonText='确定'
                        cancelButtonText='取消'
                        @onConfirm="delMsg(scope.row.id)"
                      >
                        <el-button slot="reference"  size='mini' type='text'  icon="el-icon-delete"   >删除</el-button>
                      </el-popconfirm>


                    </template>
                  </el-table-column>

                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="end">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="prev, pager, next, sizes, total, jumper"
                :total="total">
              </el-pagination>
            </el-row>

            <Modal v-model="msgModal" :mask-closable="false"   width="45%" title="查看消息模板"  :transfer="false">

              <Form :model="messageTemplate" :label-width="120">
                <FormItem label="模版名称">
                  <Input v-model="messageTemplate.subject"  disabled></Input>
                </FormItem>
                <FormItem label="模版业务键">
                  <Input v-model="messageTemplate.keyName"   disabled></Input>
                </FormItem>
                <FormItem label="是否默认模板">
                  <el-tag v-if="messageTemplate.isDefault=='1'" type="primary">是</el-tag>
                  <el-tag v-else type="error">否</el-tag>
                </FormItem>
                <FormItem label="标题">
                  <Input v-model="messageTemplate.subject"   disabled></Input>
                </FormItem>
                <FormItem label="纯文本">
                  <Input v-model="messageTemplate.plain"   disabled></Input>
                </FormItem>
                <FormItem label="纯文本模板">
                  <Input v-model="messageTemplate.plainTemplate"  disabled></Input>
                </FormItem>
              </Form>
              <div slot="footer">


              </div>
            </Modal>
            <Modal v-model="delMsgModal" width="360" :mask-closable="false"  :transfer="false">
              <p slot="header" style="color:#f60;">
                <Icon type="ios-information-circle"></Icon>
                <span>删除操作</span>
              </p>
              <div style="text-align:center">
                确定要删除吗？
              </div>
              <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="delMsgConfirm">删除</Button>
              </div>
            </Modal>


          </div>
        </Card>
      </Col>


    </Row>


    <Row>
      <Col span="24">
      <footer></footer>
      </Col>
    </Row>
  </div>

</template>

<script>
  import {getMessageTemplate,getMessageTemplateById,delMessageTemplateById} from "@/api/analy";

  export default {
    name: 'Task',
    components:{
    },

    data() {
      return {
        tableData: [],
        tableHeight: 450,
        queryDate:[],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal:false,
        delMsgModal:false,
        delMsgModalId:"",
        chartData: {},
        sellerId: 0,
        shopName: [],
        messageTemplate:{

        },
        queryForm: {
          name: "",
          procDefName: "",
          subject: "",
          createTime: "",
          endTime: "",
          tmpCreateTime: "",
          tmpEndTime: "",
          page: 1,
          limit: 10,
          pageSize: 10,

          whereSql: "",
          typeKey: ""
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      delMsgConfirm:function(){
        delMessageTemplateById(this.delMsgModalId).then((response) => {
          var code = response.code
          if (code==0){
            this.$message({"duration":800,message:'删除成功',type:'success',customClass:'zZindex'});
            this.delMsgModal=false
            this.getData()
          }else{
            this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});
          }



        })
      },
      openMsgDialog:function(id){
        //加载数据
        getMessageTemplateById(id).then((response) => {
          this.messageTemplate = response.data

        })
         this.msgModal=true;
      },
      delMsg:function(id){
        //加载数据
        this.delMsgModalId=id;
        //this.delMsgModal=true
        delMessageTemplateById(this.delMsgModalId).then((response) => {
          var code = response.code
          if (code==0){
            this.$message({"duration":800,message:'操作成功',type:'success',customClass:'zZindex'});
            this.delMsgModal=false
            this.getData()
          }else{
            this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});
          }



        })
      },
      queryFormCreateTime:function(e){
        this.queryForm.tmpCreateTime=e;
      },
      queryFormEndTime:function(e){
        this.queryForm.tmpEndTime=e;
      },
      queryMethod:function(){
       var name=  this.queryForm.name;
       var tmpCreateTime=  this.queryForm.tmpCreateTime;
       if (tmpCreateTime ){
         if (tmpCreateTime[0]){
           this.queryForm.createTime=tmpCreateTime[0]+" - "+tmpCreateTime[1];
         }
       }
        getInstanceList(this.queryForm).then((response) => {
          this.tableData = response.data

          this.total = parseInt(response.count);

        })

      },

      getData: function () {
        getMessageTemplate(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {
        this.queryForm.page = 1
        this.queryMethod()
      },
      reset() {
        this.queryForm.name = "";
        this.queryForm.queryForm = "";
        this.queryForm.whereSql = "";
        this.queryForm.subject = "";
        this.queryForm.procDefName = "";
        this.queryForm.tmpCreateTime = "";
        this.queryForm.tmpEndTime = "";
        this.queryForm.createTime = "";
        this.queryForm.endTime = "";
        this.queryDate = [];
        this.getData()
      }

    }

  }

</script>
<style lang="scss" scoped>
  .main-div {
    background-color: #f3f3f3!important;
  }
.task-card{
  margin-top: 10px;
}

</style>
